import 'babel-polyfill';
// import 'core-js/es/map';
// import 'core-js/es/set';
import Routes from '../config/router.js'
import Router, { withRouter } from 'next/router'
import Link from 'next/link'
import {
    Layout, Menu, ConfigProvider,
    Button, Dropdown,
    Avatar
} from 'antd';

import zhCN from 'antd/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import Header from './header';
import Footer from './footer';
import config from '../config'
const { SubMenu } = Menu;
const { Sider, Content } = Layout;
moment.locale('zh-cn');
import $filters from '@/filters';
React.$filters = $filters

const customizeRenderEmpty = () => (
    <div style={{ textAlign: 'center' }}>
        {/* <SmileOutlined style={{ fontSize: 20 }} /> */}
        <img src="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
            style={{
                margin: '0 auto 30px',
                width: 80
            }} />
        <p className={'text-gray-500'}>暂无数据</p>
    </div>
);
class Container extends React.Component {
    constructor(props) {
        super(props)
    }
    initData = () => {
        let currentRoute = Routes[0]
        Routes.map(el => {
            if (this.props.router.pathname.includes(el.path)) {
                currentRoute = el
            }
        })
        return {
            collapsed: false,
            currentRoute,
            selectedKeys: [this.props.router.pathname],
            defaultSelectedKeys: [this.props.router.pathname]
        }
    }
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed
        })
    }

    state = {
        userinfo: this.props.userinfo,
        ...this.initData()
    }
    handlerMenuClick = ({ item, key, keyPath, domEvent }) => {
        Routes.map(el => {
            if (el.path === key) {
                this.setState({
                    currentRoute: el,
                    selectedKeys: [key],
                    defaultSelectedKeys: [key]
                })
            }
            if (key === '/') Router.push('/')
        })
    }
    componentDidMount () {
        // console.log(this.props.cookies, 'this.props.cookies')
        const { router } = this.props
        router.prefetch('/dynamic')
    }
    render () {
        // const { userinfo = {} } = this.state
        return (
            <Layout className="flex-col" style={{height: '100vh', overflow: 'hidden'}}>
                <Sider
                    theme="light"
                    trigger={null}
                    collapsible
                    collapsed={this.state.collapsed}
                    style={{
                        overflow: 'auto',
                        height: '100vh',
                        position: 'fixed',
                        zIndex: 10,
                        boxShadow: '0 10px 30px #ccc',
                        left: 0,
                    }}
                >
                    <div
                        className="logo flex items-center flex-row overflow-hidden"
                        onClick={() => {
                            this.handlerMenuClick({ key: '/' })
                        }}
                        style={{ height: 60 }}>
                        <span className='flex-1 text-center text-lg'
                            style={{ cursor: 'pointer' }}
                        >{this.state.collapsed ? 'admin' : config.websiteName}</span>
                    </div>
                    <Menu
                        theme="light"
                        mode="inline"
                        onClick={({ item, key, keyPath, domEvent }) => this.handlerMenuClick({ item, key, keyPath, domEvent })}
                        defaultSelectedKeys={this.state.defaultSelectedKeys}
                        selectedKeys={this.state.selectedKeys}
                    >
                        {Routes.map(el =>
                            (!el.children && el.meta.showInMenu ?
                                <Menu.Item key={el.path}>
                                    <Link href={el.path}>
                                        <a>
                                            {el.meta.icon}
                                            <span>{el.meta.title}</span>
                                        </a>
                                    </Link>
                                </Menu.Item>
                                : el.children ? el.children.filter(el => el.showInMenu).length ?
                                    <SubMenu key={el.path}
                                        icon={el.meta.icon}
                                        title={<span>
                                            <span>{el.meta.title}</span>
                                        </span>}>
                                        {el.children.map(child => (
                                            <Menu.Item key={child.path}>
                                                <Link href={child.path}>
                                                    <a>
                                                        {child.meta.icon}
                                                        <span>{child.meta.title}</span>
                                                    </a>
                                                </Link>
                                            </Menu.Item>
                                        ))}
                                    </SubMenu>
                                    : <Menu.Item key={el.path}>
                                    <Link href={el.path}>
                                        <a>
                                            {el.meta.icon}
                                            <span>{el.meta.title}</span>
                                        </a>
                                    </Link>
                                </Menu.Item> : null
                            ))}
                    </Menu>
                </Sider>
                <Layout className="site-layout flex-col" style={{ marginLeft: !this.state.collapsed ? 200 : 80, width: 'auto', transition: 'all 0.3s' }}>
                    <Header {...this.state} {...this.props} toggle={this.toggle} />
                    <Layout className="main ml-5">
                        <Content
                            className="site-layout-background bg-white"
                            style={{
                                margin: '16px 16px 16px 0',
                                padding: '16px 16px 0',
                                overflow: 'hidden',
                                overflowY: 'auto',
                                maxHeight: 'calc(100vh - 120px)',
                                boxShadow: '0 10px 30px #ccc',
                                minHeight: '300px',
                            }}
                        >
                            <ConfigProvider componentSize={'middle'} locale={zhCN} renderEmpty={customizeRenderEmpty}>
                                {this.props.children}
                            </ConfigProvider>
                        </Content>
                    </Layout>
                    <Footer></Footer>
                </Layout>
            </Layout >
        );
    }
}
export default withRouter(Container)